<template>
  <div class="goods-list">
    <el-collapse>
      <el-collapse-item title="商品管理介绍">
        <div>商品管理模块可以对客户端的商品进行增删改查等相关操作,来控制客户端商品的列表展示和商品详情</div>
      </el-collapse-item>
    </el-collapse>

    <!-- 条件查询 -->
    <el-collapse class="margin_30">
      <el-collapse-item title="条件查询">
        <el-form ref="form" :model="productForm" label-width="80px" size="mini">
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <el-form-item label="商品名称">
                <el-input v-model="productForm.name" placeholder="商品名称/模糊查询" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="商品货号">
                <el-input v-model="productForm.productSn" placeholder="商品货号" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="品牌">
                <el-select v-model="productForm.brandId" placeholder="品牌" clearable filterable>
                  <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- publishStatus (integer, optional): 上架状态，0->下架；1->上架  -->
            <el-col :span="6" :offset="0">
              <el-form-item label="上架状态">
                <el-select v-model="productForm.publishStatus" placeholder="上架状态" clearable filterable>
                  <el-option
                    label="下架"
                    :value="0"
                  />
                  <el-option
                    label="上架"
                    :value="1"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- verifyStatus (integer, optional): 审核状态：0->未审核；1->审核通过 -->
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <el-form-item label="审核状态">
                <el-select v-model="productForm.verifyStatus" placeholder="审核状态" clearable filterable>
                  <el-option
                    label="未审核"
                    :value="0"
                  />
                  <el-option
                    label="审核通过"
                    :value="1"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="12">
              <el-form-item>
                <el-button @click="resetgoods">重置</el-button>
                <el-button type="primary" @click="searchgoods">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
    </el-collapse>

    <!-- 商品列表 -->
    <goods
      :brandlist="brandList"
      :current="0"
      :productform="productForm"
      :list="list"
      :total="paginationParams.total"
      @uptlimit="parentuptlimit"
      @uptstart="parentuptstart"
      @isNewStatus="parentIsNewStatus"
      @isRecommendStatus="isRecommendStatus"
      @isPublishStatus="isPublishStatus"
      @isVerifyStatus="isVerifyStatus"
      @editSku="editSku"
    />

    <el-dialog title="sku列表" width="80%" :visible.sync="dialogTableVisible">
      <el-button type="primary" style="margin-bottom:20px;" size="small" @click="addSku">新增</el-button>

      <el-table :data="pmsSkuStockList" border stripe>
        <el-table-column
          prop="#"
          type="index"
          label="序号"
        />
        <el-table-column
          prop="id"
          label="图片"
        >
          <template v-slot="scope">
            <el-upload
              class="avatar-uploader"
              :headers="token"
              :action="uploadFileOss"
              :show-file-list="false"
              :on-success="ele=>getUploadImg(ele.data.fileUrl,scope.$index)"
            >
              <img v-if="scope.row.pic" style="width:100px;height:100px" :src="scope.row.pic" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="颜色"
        >
          <template v-slot="scope">
            <el-input v-model="scope.row.spData[0].value" placeholder="" size="normal" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="大小"
        >
          <template v-slot="scope">
            <el-input v-model="scope.row.spData[1].value" placeholder="" size="normal" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="库存"
        >
          <template v-slot="scope">
            <el-input v-model="scope.row.stock" placeholder="" size="normal" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="预警库存"
        >
          <template v-slot="scope">
            <el-input v-model="scope.row.lockStock" placeholder="" size="normal" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="锁定库存"
        >
          <template v-slot="scope">
            <el-input v-model="scope.row.lowStock" placeholder="" size="normal" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="sku编码"
        >
          <template v-slot="scope">
            <el-input v-model="scope.row.skuCode" placeholder="" size="normal" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="价格"
        >
          <template v-slot="scope">
            <el-input v-model="scope.row.price" placeholder="" size="normal" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="销量"
        >
          <template v-slot="scope">
            <el-input v-model="scope.row.sale" placeholder="" size="normal" clearable />
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button style="color:red;" size="mini" type="text" @click="delSku(scope.row.id)">删除</el-button>
            <el-button v-if="scope.row.id" size="mini" type="text" @click="confirmEdit(scope.row)">确认修改</el-button>
            <el-button v-else size="mini" type="text" @click="saveSku(scope.row)">保存</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import mix from '@/mixins'
import goods from '@/components/goods/index.vue'
import { productsByPage, findAllRecommends, delRecommend, findAllBrand } from '@/api/market/activity'
import { switchNewStatus, switchRecommandStatus, switchPublishStatus, switchVerifyStatus, getSkusByProductId, updateSkuInfo, delSku, addProductSkus } from '@/api/product/list'
import _ from 'lodash'
export default {
  name: 'GoodsList',
  components: { goods },
  mixins: [mix],
  data() {
    return {
      dialogTableVisible: false,
      isShowDialog: false,
      start: 1,
      limit: 5,
      list: [],
      productList: [],
      form: {},
      brandList: [],
      productForm: {
        'brandId': '',
        'id': '',
        'name': '',
        'productCategoryId': '',
        'productSn': '',
        'publishStatus': '',
        'verifyStatus': ''
      },
      productId: '',
      pmsSkuStockList: []
    }
  },

  created() {
    this.getActivityList()
  },

  mounted() {

  },

  methods: {
    saveSku(obj) {
      console.log(obj)
      obj.productId = this.productId
      var deep = _.cloneDeep(obj)
      deep.spData = JSON.stringify(obj.spData)
      addProductSkus(deep)
        .then(res => {
          // console.log(res)
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.getSkus(this.productId)
        })
    },
    delSku(id) {
      this.$confirm('是否删除sku?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        delSku(id)
          .then(res => {
            // console.log(res)
            this.getSkus(this.productId)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 弹窗里确认编辑sku
    confirmEdit(obj) {
      console.log(obj)
      var deep = _.cloneDeep(obj)
      deep.spData = JSON.stringify(obj.spData)
      updateSkuInfo(deep)
        .then(res => {
          // console.log(res)
          this.$message({
            message: 'sku修改成功',
            type: 'success'
          })
        })
    },
    // 新增sku
    addSku() {
      var obj = {
        'createTime': '',
        'id': '',
        'lockStock': '',
        'lowStock': '',
        'modifyTime': '',
        'pic': '',
        'price': '',
        'productId': '',
        'promotionPrice': '',
        'sale': '',
        'skuCode': '',
        'spData': [{ 'key': '颜色', value: '' }, { 'key': '大小', value: '' }],
        'stock': ''
      }
      this.pmsSkuStockList.push(obj)
    },
    // 上传sku图片
    getUploadImg(e, index) {
      // console.log(e)
      this.pmsSkuStockList[index].pic = e
    },
    // 编辑sku
    editSku(id) {
      this.dialogTableVisible = true
      this.productId = id
      this.getSkus(id)
    },
    getSkus(id) {
      getSkusByProductId(id)
        .then(res => {
          // console.log(res)
          res.data.items.forEach(ele => {
            ele.spData = JSON.parse(ele.spData)
          })
          this.pmsSkuStockList = res.data.items
        })
    },
    // 重置
    resetgoods() {
      this.productForm = {}
      this.getActivityList()
    },
    // 子组件条件搜索
    searchgoods() {
      this.getActivityList()
    },
    // 子组件当前页
    parentuptstart(e) {
      this.paginationParams.start = e
      this.getActivityList()
    },
    // 子组件每页数据
    parentuptlimit(e) {
      this.paginationParams.limit = e
      this.getActivityList()
    },
    getActivityList() {
      // 活动列表
      findAllRecommends()
        .then(res => {
          // console.log(res)
          this.productList = res.data.items
        })
        // 商品列表
      productsByPage(this.paginationParams.start, this.paginationParams.limit, this.productForm)
        .then(res => {
          // console.log(res)
          this.list = res.data.rows
          this.paginationParams.total = res.data.total
        })
        // 品牌列表
      findAllBrand()
        .then(res => {
          // console.log(res)
          this.brandList = res.data.items
        })
    },
    goEdit() {

    },
    del(id) {
      console.log(id)
      delRecommend(id)
        .then(res => {
          // console.log(res)
          this.getActivityList()
        })
    },
    addActivity() {

    },
    // 取消新增
    handleDialog() {
      this.isShowDialog = false
      this.form = {}
    },
    // 新增
    goAddActivity() {
      this.isShowDialog = true
    },
    parentIsNewStatus(e) {
      switchNewStatus(e)
        .then(res => {
          // console.log(res)
          this.$message({
            message: '修改状态成功',
            type: 'success'
          })
        })
    },
    isRecommendStatus(e) {
      switchRecommandStatus(e)
        .then(res => {
          // console.log(res)
          this.$message({
            message: '修改状态成功',
            type: 'success'
          })
        })
    },
    isPublishStatus(e) {
      switchPublishStatus(e)
        .then(res => {
          // console.log(res)
          this.$message({
            message: '修改状态成功',
            type: 'success'
          })
        })
    },
    isVerifyStatus(e) {
      switchVerifyStatus(e)
        .then(res => {
          // console.log(res)
          this.$message({
            message: '修改状态成功',
            type: 'success'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .goods-list{
    .el-collapse{
      padding-bottom: 10px;
      background-color: #fff;
      text-indent: 10px;
    }
  }
</style>
